
import React, { useEffect, useState } from 'react';
import { Button, Select, Form, Input } from 'antd';
import http from '@/src/utils/https';


type PropsType = {
    handelsearch:Function
}

const GroupSearch: React.FC<PropsType> = ({ handelsearch }) => {
    const [form] = Form.useForm()
    const onFinish = (values: any) => {
        handelsearch(values)
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    let [ad,setad] = useState(''),
        [ci,setci] = useState(''),
        [ar,setar] =useState('');


    //城市列表
    let [address,setAddress] = useState([] as any)
    let [city,setCity] = useState([] as any)
    let [area,setArea] = useState([] as any)

    //获取省份
    useEffect(()=>{
        if(address.length<=0){
            getAddress()
        }
    },[])
    const getAddress = async () =>{
        let res = await http.get("/address/district")
        // console.log(res.data.data,"address")
        if(res.data.code==200){
            setAddress(res.data.data)
        }
    }
    //获取市区
    useEffect(()=>{
        setCity([] as any)
        setArea([] as any)
        if(ad!=""){
            form.setFieldValue("city","")
            form.setFieldValue("area","")
            getCity()
        }  
    },[ad])
    const getCity =async () =>{
        let res = await http.get("/address/city",{params:{sqe:ad}})
        if(res.data.code==200){
            // console.log(res.data.data,"city")
            setCity(res.data.data)
        }
    }

    //获取城镇
    useEffect(()=>{
        setArea([] as any)
        if(ci!=""){
            form.setFieldValue("area","")
            getArea()
        }
    },[ci])

    const getArea = async () =>{
        let res = await http.get("/address/area",{params:{sqe:ci}})
        if(res.data.code==200){
            // console.log(res.data.data,"area")
            setArea(res.data.data)
        }
    }
    return (
        <Form
            form={form}
            name="basica"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ width: "100%" }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            layout="inline"
        >

            <Form.Item label="省份" name="address" wrapperCol={{ offset: 0, span: 24 }}>
                <Select style={{ width: 80 }} value={ad} onChange={(value)=>{
                        setad(value)
                }}>
                    {
                        address.length>0&& address.map((item:any)=>(
                            <Select.Option value={item.district_sqe} key={item.id}>{item.district_name}</Select.Option>
                        )) 
                    }
                </Select>
            </Form.Item>
            <Form.Item label="城市" name="city" wrapperCol={{ offset: 0, span: 24 }}>
                <Select style={{ width: 100 }}  value={ci} onChange={(value)=>{
                        setci(value)
                }}>
                { 
                    city.length>0&& city.map((item:any)=>(
                            <Select.Option value={item.district_sqe} key={item.id}>{item.district_name}</Select.Option>
                        )) 
                    }
                </Select>
            </Form.Item>
            <Form.Item label="区县" name="area" wrapperCol={{ offset: 0, span: 24 }}>
                <Select style={{ width: 100 }}  value={ar} onChange={(value)=>{
                        setar(value)
                }}>
                    { 
                    area.length>0&& area.map((item:any)=>(
                            <Select.Option value={item.id} key={item.id}>{item.district_name}</Select.Option>
                        )) 
                    }
                </Select>
            </Form.Item>
            <Form.Item
                label="团购名称"
                name="username"
                rules={[{  message: '输一点儿东西阿小弟弟' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item label="状态" name="status">
                <Select
                    style={{ width: 80 }}
                    allowClear
                    options={[
                        {
                            label:"开启",
                            value:"1",
                            key:"1"
                        },{
                            label:"关闭",
                            value:"0",
                            key:"0"
                        }
                    ]}
                >
                </Select>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    搜索
                </Button>
            </Form.Item>
           
        </Form>
    )
}

export default GroupSearch